<div class="white-bg view-container flex-body">
    <main-header></main-header>
    <div class="content">
        <div class="grad-container grad-vh">
            <div class="col s12 m6 ">
                <section class="ev-sm-container ev-view challenge-container">
                    <div class="ev-md-container ev-card-panel ev-z-depth-5 challenge-title-container ">
                        <div class="row">
                            <div class="col s12 m3 l2">
                                <div class="image-container">
                                    <img src="{{featured_challenge.page.image}}" width="100%">
                                </div>
                            </div>
                            <div class="col m9 l10">
                                <div class="card-content">
                                    <p><span class="fs-18"><strong>{{featured_challenge.page.title}}</strong></span>
                                        <br>
                                        <span ng-if="featured_challenge.page.creator.team_url != ''"><strong
                                                class="text-light-black">Organized by:</strong><a class="orange-text"
                                                href="{{featured_challenge.page.creator.team_url}}" target="_blank">
                                                {{featured_challenge.page.creator.team_name}} </a></span>
                                        <span ng-if="featured_challenge.page.creator.team_url == ''"><strong
                                                class="text-light-black">Organized by:</strong>
                                            {{featured_challenge.page.creator.team_name}} </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="row rm-row-bot">
                            <div class="col s12">
                                <ul class="inline-list rm-gut">
                                    <li><a ui-sref=".overview" ui-sref-active="active-challenge"
                                            class="text-light-black w-500"><i class="fa fa-info"></i> Overview</a></li>
                                    <li><a ui-sref=".evaluation" ui-sref-active="active-challenge"
                                            class="text-light-black w-500"><i class="fa fa-bar-chart-o"></i>
                                            Evaluation</a></li>
                                    <li><a ui-sref=".phases" ui-sref-active="active-challenge"
                                            class="text-light-black w-500"><i class="fa fa-level-up"></i> Phases</a>
                                    </li>
                                    <li ng-if="!featured_challenge.isParticipated"><a ui-sref=".participate"
                                            ui-sref-active="active-challenge" class="text-light-black w-500"><i
                                                class="fa fa-free-code-camp"></i> Participate</a></li>
                                    <li><a ui-sref=".leaderboard" ui-sref-active="active-challenge"
                                            class="text-light-black w-500"><i class="fa fa-th-list"></i> Leaderboard</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
                <ui-view></ui-view>
            </div>
        </div>
    </div>
    <landing-footer></landing-footer>
</div>
